<template>
	<view>
		<!-- <view style="style=width: 100%; height: 450rpx;" v-if="!isLoad">
			<u-loading mode="flower"></u-loading>
		</view> -->
		<u-toast ref="uToast" />
		<u-image src="" v-if="!isLoad" width="100%" height="450rpx"></u-image>
		<u-image :src="url + 'courseImages/' + courseDetails.courseImage" v-if="isLoad" width="100%" height="450rpx"></u-image>

		<view style="position: absolute; top: 20rpx; left: 20rpx;">
			<navigator hover-class="none" open-type="navigateBack">
				<u-icon name="arrow-left" color="#000000" size="50"></u-icon>
			</navigator>
		</view>
		<!-- myTab用于定位组件 -->
		<view id="myTab">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"
			 bar-height="6"></u-tabs-swiper>
		</view>
		<swiper :style="'height:' +  height + 'rpx;'" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y :style="'height:' + height + 'rpx;width: 100%;'" @scrolltolower="onreachBottom">

					<view v-if="index == 0">
						<Controduce :courseID="courseID"></Controduce>
					</view>

					<view v-if="index == 1">
						<Outline :courseID="courseID"></Outline>
					</view>

					<view v-if="index == 2">
						<Evaluate :courseID="courseID"></Evaluate>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view>
			<view v-if="!isJoin" class="bottomStyle" type="primary"><button class="buttonStyle" @tap="goJoin">立即参加</button></view>
			<view v-if="isJoin" class="bottomStyle" type="primary"><button class="buttonStyle" @tap="goDetail">已参加，进入学习</button></view>
		</view>
	</view>
</template>

<script>
	import Controduce from '@/pages/joinCourse/component/controduce.vue';
	import Outline from '@/pages/joinCourse/component/outline.vue';
	import Evaluate from '@/pages/joinCourse/component/evaluate.vue';

	import {
		getCourseDetails
	} from '@/api/modules/course.js'
	import {
		joinCourse,
		getCourseStudying
	} from '@/api/modules/joinCourse.js'


	export default {
		data() {
			return {
				joinFormData: {
					userEmail: '',
					courseId: ''
				},
				courseinfo:{},
				courseID: '',
				height: 0,
				isJoin: false,
				isLoad: false,
				url: this.GOBAL.baseURL,
				studylist: [],
				courseDetails: {
					courseImage: ''
				},
				isLogin: false,
				windowHeight: 800,

				// u-tabs-swiper
				list: [{
					name: '课程介绍'
				}, {
					name: '课程大纲'
				}, {
					name: '课程评价'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		components: {
			Controduce,
			Outline,
			Evaluate
		},
		// 用于找到组件上下部分剩余屏幕大小
		//参考博客链接：https://blog.csdn.net/weixin_39793790/article/details/105397875
		onReady: function(res) {

			var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					let query = uni.createSelectorQuery()
					query.select('#myTab').boundingClientRect()
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top;
						// console.log(resu.windowWidth)
						_this.height = _this.height * 750.0 / resu.windowWidth;
						// console.log('打印页面的剩余高度', _this.height+'rpx');
					})
				},
				fail: (res) => {
					console.log('错误了')
				}
			})
		},
		methods: {
			//加入课程
			goJoin() {
				if (this.isLogin) {
					//console.log('加入成功')
					this.joinFormData.userEmail = uni.getStorageSync('userEmail'),
						this.joinFormData.courseId = this.courseID,
						joinCourse({
							...this.joinFormData
						})
						.then(resp => {
							this.isJoin = true
							let userinfo = {
								userEmail:uni.getStorageSync('userEmail')
							}
							getCourseStudying(userinfo)
								.then(resp => {
									this.studylist = resp.data.mycourselist
									//console.log("有东西吗"+this.studylist[0].courseID)
									uni.setStorageSync('studylist',this.studylist)
								}).catch({})
							this.$refs.uToast.show({
								title: '加入成功',
								type: 'success',
								duration: 1000
							})
						})
						.catch(resp => {
							this.$refs.uToast.show({
								title: '加入失败',
								type: 'error',
								duration: 1000
							})
						})
				} else {
					this.$refs.uToast.show({
						title: '请先登录账号~',
						type: 'info',
						duration: 1000,
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '../account/basicLogin/login'
						});
					}, 1000)
					//url: '../../account/basicLogin/login'
				}
			},
			//课程学习
			goDetail() {
				console.log('开始学习')
				uni.navigateTo({
					url: '../course/courseDetails?courseID=' + this.courseID,
					success() {
						uni.setStorageSync('courseId', this.courseID)
					}
				});
			},
			// 以下是u-tabs-swiper
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		},
		mounted() {



			/* let that = this;
			// console.log(params.courseID); //打印出上个页面传递的参数。
			let data = {
				id: that.courseID
			}
			getCourseDetails(data)
				.then(resp => {
					// console.log(resp)
					that.courseDetails = resp.data
			
					// console.log(that.courseDetails)
			
					that.isLoad = true
				})
				.catch(resp => {
			
				}) */
		},
		onLoad(params) {
			let that = this;

			uni.getStorage({
				key: 'userName',
				success: function(res) {
					that.isLogin = true;
				},
			});

			that.courseID = params.courseID

			//console.log(params.courseID); //打印出上个页面传递的参数。

			let data = {
				id: params.courseID
			}
			if (this.isLogin) {
				//console.log("课程学习了哪些" + uni.getStorageSync('studylist'))
				this.studylist = uni.getStorageSync('studylist')
				for (let i = 0; i < this.studylist.length; i++) {
					if (this.studylist[i].courseID == that.courseID) {
						this.isJoin = true
						break;
					}
				}
			}
			getCourseDetails(data)
				.then(resp => {
					// console.log(resp)
					that.courseDetails = resp.data
					// console.log(that.courseDetails)
					that.isLoad = true
				})
				.catch(resp => {})
		},
		onShow() {
			//
			/* let userEmail = uni.getStorageSync('userEmail')
			if (userEmail != null && userEmail != "") {
				this.isLogin = true
			} */

		},
	}
</script>

<style scoped>
	.swiper-item {
		height: 300rpx;
		background-color: #F7F7F7;
	}

	.bottomStyle {
		background-color: #F2F2F2;
		position: fixed;
		bottom: 0rpx;
		height: 100rpx;
		width: 100%;
		display: block;
		z-index: 999;
	}

	.buttonStyle {
		width: 700rpx;
		margin-top: 10rpx;
		height: 80rpx;
		background-color: #19BE6B;
		border-radius: 40rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>
